<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>天地图加载GeoServer WMS</title>
    <script src="/Public/js/tianditu.api.js"></script>
    <style>
        #map {
            width: 100%;
            height: 100vh;
        }

        .control-panel {
            position: absolute;
            top: 10px;
            right: 10px;
            background: white;
            padding: 10px;
            border-radius: 5px;
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <div class="control-panel">
        <label><input type="checkbox" id="toggle-layer" checked> 显示河流数据</label>
        <br>
        <label>透明度: <input type="range" id="opacity" min="0" max="1" step="0.1" value="0.7"></label>
    </div>

    <script>
        // 初始化地图
        var map = new T.Map('map',{tileSize:512});
        map.centerAndZoom(new T.LngLat(102.607, 30.652), 12);

        // 创建WMS图层
        var wmsLayer = new T.TileLayer.WMS(
            'http://8.155.1.150:8080/geoserver/WMTS_F/wms',
            {
                layers: 'WMTS_F:RIVER_YA',
                format: 'image/png',
                transparent: true,
                version: '1.1.1',
                srs: 'EPSG:4326',
                styles: '',
                exceptions: 'application/vnd.ogc.se_inimage'
            },
            {
                opacity: 0.7,
                minZoom: 0,
                maxZoom: 18
            }
        );
        // 添加WMS图层
        map.addLayer(wmsLayer);

        // 控件事件处理
        document.getElementById('toggle-layer').addEventListener('change', function (e) {
            if (e.target.checked) {
                map.addLayer(wmsLayer);
            } else {
                map.removeLayer(wmsLayer);
            }
        });

        document.getElementById('opacity').addEventListener('input', function (e) {
            wmsLayer.setOpacity(parseFloat(e.target.value));
        });
    </script>
</body>

</html>